<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useHospitalStore } from '@/store/modules/hospital'

const routeArr = ref<any>([])
const useHospital = useHospitalStore()

const $router = useRouter()
const $route = useRoute()

console.log($route)
function mapToMenu(routes, name: string) {
  let routeArr = []
  routeArr = routes.find((item) => item.name == name && item.children)?.children

  return routeArr
}
// 请求数据

const { hoscode } = $route.query
// 请求数据
const fetchRegisterData = (hoscode: string) => {
  useHospital.fetchHospitalResgiterAction(hoscode)
}
// 请求科室数据
const fetchDepartData = (hoscode: string) => {
  useHospital.fetchHospitalDepartmentAction(hoscode)
}
const MenuItemClickHandle = (item) => {
  console.log('item', item)
  console.log(' $route:::', $route)
  console.log('$router:::', $router)
  $router.replace({
    path: '/hospital/' + item.name,
    query: {
      hoscode: $route.query.hoscode
    }
  })
}
onMounted(() => {
  routeArr.value = mapToMenu($router.options.routes, 'hospital')
  fetchRegisterData(hoscode as string)
  fetchDepartData(hoscode as string)
})
</script>
<template>
  <div class="hospital">
    <div class="container">
      <div class="content">
        <el-row :gutter="20" class="elrow">
          <el-col :span="3">
            <el-menu :default-active="$route.path">
              <template v-for="item in routeArr" :key="item.path">
                <el-menu-item
                  :index="`${item.path}`"
                  @click="MenuItemClickHandle(item)"
                >
                  <div
                    :class="{
                      // selected: $route.path == `/hospital/${item.path}`,
                      selected: $route.path.includes(`${item.path}`),
                      item
                    }"
                  >
                    <icon-title></icon-title>
                    <span>
                      {{ item.meta.title }}
                    </span>
                  </div>
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>
          <el-col :span="21">
            <router-view></router-view>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.hospital {
  .content {
    margin: 20px 0;
    :deep(.el-row) {
      margin: 0 !important;
      padding: 0 !important;
    }
    .el-menu {
      position: sticky;
    }
    .el-menu-item {
      &:hover {
        background: none;
        font-weight: 700;
        color: var(--text-hover-color);
      }

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      .selected {
        font-weight: bold;
        font-size: 16px;
        color: var(--primary-color);
        .icon {
          color: inherit;
        }
      }
    }
  }
}
</style>
